<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isFullScreen?'exit-fullscreen':'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>
/**
全屏切换：
  1、找到可以进行全屏切换的底层API【由浏览器提供的。MDN可以查】
  2、交互形式：如果当前的非全屏状态，就开启全屏，如果不是全屏，则关闭全屏
  icon图标的切换
    思路：根据当前是否全屏的状态切换svg-icon组件中icon-class的值
3、es退出bug:
  表现：浏览器虽然退出了全屏，但是咱们本地维护的状态isFullScreen没有跟着一起变，还是开启的状态 ，没有变成false
  解决思路：监听一下现在是否退出了全屏，一旦发现它不是全屏模式了，立刻把isFullScreen设置为false，和全屏状态保持一致
  技术解决：
    1、如何监听是否退出了全屏---fullscreenchange(只要你切换了全屏，事件回调就会执行)

    2、如何得知当前浏览器的状态是否退出了全屏 document.fullscreenElement

 */
<script>
import fullscreen from 'screenfull'
export default {
  name: 'ScreenFull',
  data(){
    return {
      // 默认为不全屏的状态
      isFullScreen: false
    }
  },
  mounted(){
    // window.addEventListener('fullscreenchange', () => {
    //   // console.log('浏览器全屏状态切换了', )
    //   if (document.fullscreenElement == null){
    //     // 就代表屏幕退出了全屏，那我们就将isFullScreen改为false
    //     this.ifFullScreen = false

    //   }
    // })
    // 把自己用来控制图标显示的isFullScreen和人家给到的是否全屏保持一致
    fullscreen.on('change', () => {
      this.isFullScreen = fullscreen.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
      // // 全屏切换，取反操作，只要是两种状态来回切换，就使用取反操作
      // if (this.ifFullScreen){
      //   // 退出全屏
      //   document.exitFullscreen()
      // } else {
      //   // 开启全屏
      //   document.documentElement.requestFullscreen()
      // }
      // this.ifFullScreen = !this.ifFullScreen
      fullscreen.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
